<template>
  <section class="todoapp">
    <!-- 除了驼峰, 还可以使用-转换链接 -->
   <TodoHeader1 @add="add"/>
   <TodoMain1 :list="list" @sub="sub" />
   <TodoFooter1 :list="list"/>
  </section>
</template>

<script>
// 1.0 样式引入
import "./styles/base.css"
import "./styles/index.css"
    
import TodoHeader1 from "./components/TodoHeader1";
import TodoMain1 from "./components/TodoMain1";
import TodoFooter1 from "./components/TodoFooter1";


export default {
  components: {
    TodoHeader1,
    TodoMain1,
    TodoFooter1,
  },
  data() {
    return {
      list: [
        { id: 100, name: "吃饭", isDone: true },
        { id: 201, name: "睡觉", isDone: false },
        { id: 103, name: "打豆豆", isDone: true },
      ],
    };
  },
  methods:{
    add(str){
    let id=this.list.length>0? this.list[this.list.length-1].id+1 :100
    this.list.push({
      id,
      name:str,
      isDone:false
    })
    console.log(str);
    },
    sub(id){
    const index=this.list.findIndex(obj=>obj.id===id)
    this.list.splice(index,1)
    }
  }
};
</script>